<script setup lang="ts">



import MovieBoxTopTen from "@/components/MovieBoxTopTen.vue";
import MovieBoxTopOneDailyTrends from "@/components/MovieTotalBoxDailyTrends.vue";
import MovieBoxRatio from "@/components/MovieBoxRatio.vue";
import MovieBoxAndShowCountRegression from "@/components/MovieBoxAndShowCountRegression.vue";
import MovieTopOneHeatTrends from "@/components/MovieTopOneHeatTrends.vue";
</script>

<template>
  <div class="content">
    <div class="title">
      影视作品数据爬取与可视化
    </div>
    <div class="row">
      <movie-box-top-ten></movie-box-top-ten>
      <movie-box-top-one-daily-trends></movie-box-top-one-daily-trends>
    </div>
    <div class="row">
      <movie-box-and-show-count-regression></movie-box-and-show-count-regression>
      <movie-top-one-heat-trends></movie-top-one-heat-trends>
      <movie-box-ratio></movie-box-ratio>
    </div>
  </div>
</template>

<style scoped>
.content{
  background-image: url("src/assets/cool-background.svg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

}
.row{
  width: 100%;
  height: 40vw;
  display: flex;
  flex-direction: row;
}
.title{
  font-size: 32px;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>